<template>
  <base-breadcrumb :title="title" :breadcrumb="!isAudit">
    <!-- 品质工程新六项措施计划详情 -->
    <div
      id="base-breadcrumb"
      style="position: relative"
    >
      <!-- 项目信息 -->
      <a-spin :spinning="loading[0] || loading[1]">
        <a-card
          :bordered="false"
          class="mb20"
        >
          <title-name title="项目信息" />
          <a-form-model
            ref="ruleForm"
            :model="form"
            :label-col="{ span: 6 }"
            :wrapper-col="{ span: 18 }"
          >
            <a-row>
              <a-col
                :xs="24"
                :sm="24"
                :md="24"
                :lg="24"
              >
                <a-form-model-item
                  label="所属单位"
                  prop="branchCompanyId"
                >
                  <BaseInput
                    v-model="form.viewName"
                    disabled
                  />
                </a-form-model-item>
              </a-col>
              <!--            <a-row>-->
              <!--              <a-col-->
              <!--                :xs="24"-->
              <!--                :sm="12"-->
              <!--                :md="8"-->
              <!--                :lg="8"-->
              <!--              >-->
              <!--                <a-form-model-item-->
              <!--                  label="分公司名称"-->
              <!--                  prop="branchCompanyId"-->
              <!--                >-->
              <!--                  <BaseInput-->
              <!--                    disabled-->
              <!--                    v-model="form.branchCompanyName"-->
              <!--                  ></BaseInput>-->
              <!--                </a-form-model-item>-->
              <!--              </a-col>-->
              <!--              <a-col-->
              <!--                :xs="24"-->
              <!--                :sm="12"-->
              <!--                :md="8"-->
              <!--                :lg="8"-->
              <!--              >-->
              <!--                <a-form-model-item-->
              <!--                  label="项目名称"-->
              <!--                  prop="projectId"-->
              <!--                >-->
              <!--                  <BaseInput-->
              <!--                    disabled-->
              <!--                    v-model="form.projectName"-->
              <!--                  ></BaseInput>-->
              <!--                </a-form-model-item>-->
              <!--              </a-col>-->
              <!--            </a-row>-->
              <a-row>
                <a-col
                  :xs="24"
                  :sm="24"
                  :md="24"
                  :lg="24"
                >
                  <a-form-model-item
                    :label-col="{ span: 2 }"
                    :wrapper-col="{ span: 6 }"
                    label="项目基本情况"
                    prop="projectBasicSituation"
                  >
                    <BaseInput
                      v-model="form.projectBasicSituation"
                      type="textarea"
                      disabled
                    />
                  </a-form-model-item>
                </a-col>
              </a-row>
            </a-row>
          </a-form-model>
        </a-card>
        <!-- 表格 -->
        <a-card
          id="tableBox"
          :bordered="false"
          style="margin-bottom: 50px"
        >
          <title-name title="六项措施实施计划" />
          <div>
            <s-table
              ref="table"
              table-layout="fixed"
              size="default"
              row-key="sixMeasuresId"
              :columns="columns"
              :data="loadData"
              :alert="true"
              :scroll="{x:1380}"
              :show-pagination="false"
            >
              <!-- 实施部位 -->
              <div
                slot="implementationSite"
                slot-scope="text, record"
              >
                <div
                  v-if="editModel != 0"
                  class="table-item"
                >
                  <BaseInput
                    v-model="record.implementationSite"
                    :max-length="30"
                    placeholder="请输入实施部位"
                  />
                </div>
                <div v-else>
                  {{ record.implementationSite }}
                </div>
              </div>
              <!-- 实施要点 -->
              <div
                slot="implementationPoints"
                slot-scope="text, record"
              >
                <div
                  v-if="editModel != 0"
                  class="table-item"
                >
                  <BaseInput
                    v-model="record.implementationPoints"
                    :max-length="30"
                    placeholder="请输入实施要点"
                  />
                </div>
                <div v-else>
                  {{ record.implementationPoints }}
                </div>
              </div>
              <!-- 实施时间 -->
              <div
                slot="implementationTime"
                slot-scope="text, record"
              >
                <div class="table-item">
                  <a-range-picker
                    v-if="editModel != 0"
                    v-model="record.implementationTime"
                    :placeholder="['请选择实施开始时间', '请选择实施结束时间']"
                    format="YYYY-MM"
                    :mode="['month', 'month']"
                    value-format="YYYY-MM"
                    @panelChange="(e) => handleChange(record, e)"
                  />
                  <div v-else>
                    {{
                      record.implementationTimeStart && record.implementationTimeEnd
                        ? record.implementationTimeStart + '~' + record.implementationTimeEnd
                        : ''
                    }}
                  </div>
                </div>
              </div>
              <!-- 责任人 -->
              <div
                slot="dutyPeopleId"
                slot-scope="text, record, index"
              >
                <div
                  v-if="editModel != 0"
                  class="table-item"
                >
                  <SelectPersonByProject
                    v-if="index == 0"
                    v-model="record.dutyPeopleId"
                    :disabled="editModel == 2"
                    placeholder="请选择责任人"
                    :list.sync="list"
                    :project-id="form.projectId"
                    style="width: 100%"
                    :show-search="true"
                  />
                  <a-select
                    v-else
                    v-model="record.dutyPeopleId"
                    :disabled="editModel == 2"
                    placeholder="请选择责任人"
                    style="width: 100%"
                    option-filter-prop="children"
                    filter-option
                    :show-search="true"
                    allow-clear
                  >
                    <a-select-option
                      v-for="i in list"
                      :key="i.employeeId"
                      :value="i.employeeId"
                    >
                      {{
                        i.employeeName
                      }}
                    </a-select-option>
                  </a-select>
                </div>
                <div v-else>
                  {{ record.dutyPeopleName }}
                </div>
              </div>
              <!-- 备注 -->
              <div
                slot="remarks"
                slot-scope="text, record"
                style="padding-right: 10px"
              >
                <div
                  v-if="editModel != 0"
                  class="table-item"
                >
                  <BaseInput
                    v-model="record.remarks"
                    :max-length="30"
                    placeholder="请输入备注"
                  />
                </div>
                <div v-else>
                  {{ record.remarks }}
                </div>
              </div>
            </s-table>
          </div>
        </a-card>
      </a-spin>
      <!-- 页脚操作栏 -->
      <div
      v-if="!isConsultation"
        class="btn_box page-btn-right-top"
      >
        <a-button
          v-if="(editModel == 1 || editModel == 3) && (statusCode === '0' || statusCode === '3' || statusCode === '4' || statusCode === '2')"
          :loading="loading[0]"
          :disabled="loading[1]"
          type="primary"
          class="button_right"
          @click="handleSubmit(0)"
        >
          {{ statusCode === '3' || form.version > 1 ? '保存' : '保存草稿' }}
        </a-button>
        <a-button
          v-if="
            (editModel == 1 && (statusCode === '0' || statusCode === '3' || statusCode === '4')) ||
              (editModel != 0 && statusCode === '2')
          "
          :loading="loading[1]"
          :disabled="loading[0]"
          type="primary"
          class="button_right"
          @click="handleSubmit(1)"
        >
          提交
        </a-button>
        <BasePrintButton
          v-if="statusCode === '2' && editModel == 0"
          :before-print-fn="() => getPritContent('CSCEC8XN-EQ-B30621')"
          class="button_right"
        />
        <a-button
          v-if="checkVisibleInDetail"
          type="primary"
          @click="handleActiveClose"
        >
          关闭
        </a-button>
      </div>
    </div>
    <selectApprover
      :business-id="businessId"
      :process-config="setProcessConfig"
    />
  </base-breadcrumb>
</template>

<script>
import { STable } from '@/components' // 表格
import { sixMeasures } from '@/api/quality/quality' // api
import SelectPersonByProject from '@/components/Select/SelectPersonByProject' // 分包商
// import SelectDutyPeople from '@/components/Select/SelectDutyPeople' // 分包商
import BaseEditPage from '@/views/baseEditPage' // 编辑详情页基础配置
import cloneDeep from 'lodash.clonedeep' // 深拷贝
import BasePrintButton from '@/components/BasePrintButton' // 打印按钮
const columns = [
  {
    title: '六项举措内容',
    dataIndex: 'sixMeasures',
    width: '230px'
  },
  {
    title: '实施部位',
    dataIndex: 'implementationSite',
    width: '230px',
    scopedSlots: { customRender: 'implementationSite' }
  },
  {
    title: '实施要点',
    dataIndex: 'implementationPoints',
    width: '230px',
    scopedSlots: { customRender: 'implementationPoints' }
  },
  {
    title: '实施时间',
    dataIndex: 'implementationTime',
    width: '230px',
    scopedSlots: { customRender: 'implementationTime' }
  },
  {
    title: '责任人',
    dataIndex: 'dutyPeopleId',
    width: '230px',
    scopedSlots: { customRender: 'dutyPeopleId' }
  },
  {
    title: '备注',
    dataIndex: 'remarks',
    width: '230px',
    scopedSlots: { customRender: 'remarks' }
  }
]
export default {
  name: 'a' + Date.now(),
  extends: new BaseEditPage(),
  components: {
    // SelectDutyPeople,
    SelectPersonByProject,
    STable,
    BasePrintButton
  },
  props: {
    // 是否作为审批详情
    isAudit: {
      type: Boolean,
      default: false
    },
    // 是否作为意见征询
    isConsultation: {
      type: Boolean,
      default: false
    }
  },
  data() {
    this.columns = columns
    return {
      mode2: ['month', 'month'],
      value: [],
      loading: { 0: false, 1: false },
      editModel: 0,
      id: '',
      list: [],
      statusCode: '', // 审批状态
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        if (this.editModel == 2) {
          return false
        }
        let args = {}
        if (this.businessId) {
          args.id = this.businessId
        } else {
          args.id = this.id
        }
        args.isView = 0
        this.historyId && (args.historyId = this.historyId)
        return sixMeasures.historyDetail(args).then((res) => {
          let datas = cloneDeep(res)
          this.form = res.data.projectInfo
          this.form.viewName = this.form.branchCompanyName + '/' + this.form.projectName
          this.statusCode = res.data.statusCode
          datas.data = res.data.sixMeasuresPlan.map((item) => {
            if (item.implementationTimeStart && item.implementationTimeEnd) {
              item.implementationTime = [item.implementationTimeStart, item.implementationTimeEnd]
            } else {
              item.implementationTime = []
            }
            item.dutyPeopleId = item.dutyPeopleId || void 0
            return item
          }) // 列表对象
          this.sixMeasuresPlan = datas.data
          return datas
        })
        // 深拷贝回调对象
      },
      form: {
        viewName: ''
      },
      sixMeasuresPlan: [],
      titles: ['品质工程新六项措施计划查看', '品质工程新六项措施计划编辑', '品质工程新六项措施计划添加', '品质工程新六项措施计划调整'],
      //获取流程配置值
      processConfig: null,
      //点击提交发送流程配置值
      setProcessConfig: null,
      businessId: null
    }
  },
  async mounted() {
    //获取通过获取流程配置值
    this.processConfig = await this.$getConfigFn('quality_newsix_plan')
  },
  methods: {
    /**
     * 修改时间
     */
    handleChange(record, value) {
      record.implementationTime = value
    },
    /**
     * 提交表单
     */
    handleSubmit(e) {
      let that = this
      that.setProcessConfig = null;
      let name = ['update', 'create', 'adjustment'][that.editModel - 1] // 根据操作切换url地址
      let sixMeasuresPlan = this.$clone(this.sixMeasuresPlan)
      // 格式化实施时间
      sixMeasuresPlan?.forEach((res) => {
        if (res.implementationTime?.length) {
          res.implementationTimeStart = this.moment(res.implementationTime[0]).format('YYYY-MM')
          res.implementationTimeEnd = this.moment(res.implementationTime[1]).format('YYYY-MM')
        } else {
          res.implementationTimeStart && delete res.implementationTimeStart
          res.implementationTimeEnd && delete res.implementationTimeEnd
        }
        res.implementationTime && delete res.implementationTime
      })
      let form = {
        id: that.id,
        sixMeasuresPlan: sixMeasuresPlan,
        projectInfo: that.form,
        statusCode: e
      }
      const submit = () => {
        return sixMeasures[name](form)
          .then((res) => {
            that.loading[e == 3 ? '0' : e] = false
            if (res.code === 200 || res.data.code === 200) {
              that.$message.success(['保存', '提交'][e == 3 ? '0' : e] + '成功！')
            if(e*1===1) {
            //提交时，返回id
                that.businessId = res.data.id;
                that.setProcessConfig = this.processConfig;
                return
            }else{
              that.$multiTab.close()
              }
              }
          })
          .catch(() => {
            that.loading[e == 3 ? '0' : e] = false
            return Promise.reject()
          })
      }
      // 提交
      if (e === 1) {
        this.submitApprovalConfirm(this.processConfig, (flag)=>{
          if(!flag) {
            that.loading[e == 3 ? '0' : e] = false
            return
          }
          submit()
        })
      } else {
        that.loading[e == 3 ? '0' : e] = true
        // 保存
        submit()
      }
    }
  }
}
</script>
<style lang="less" scoped>
.table-item {
  min-height: 50px;
  display: flex;
  align-items: center;
  /deep/.ant-form-item {
    .ant-form-item-label {
      display: none;
    }
  }
}
#tableBox /deep/ .ant-form-item .ant-form-item-control-wrapper {
  width: auto;
}
</style>
